import React, { Component } from 'react';
import { Card } from 'antd';
//import echarts from 'echarts';
import echartTheme from './../themeLight';
//按需导入
import echarts from 'echarts/lib/echarts';
//导入折现图
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';

class Line extends Component {
	UNSAFE_componentWillMount(){
		echarts.registerTheme("Imooc", echartTheme);
	}
	
	getOption = () => {
		let option = {
			title: {
				text: "用户骑行订单",
			},
			tooltip:{
				trigger: 'axis',
			},
			xAxis:{
				data:['周一','周二','周三','周四','周五','周六','周日']
			},
			yAxis:{
				type: 'value'
			},
			series: [
				{
					name: '订单量',
					type: 'line',
					data: [1000,800,1200,1300,1215,890,1500]
				}
			]
		}
		return option;
	}
	getOption2 = () => {
		let option = {
			title: {
				text: "用户骑行订单",
			},
			legend:{
				data:["哈罗","青桔","美团"]
			},
			tooltip:{
				trigger: 'axis',
			},
			xAxis:{
				data:['周一','周二','周三','周四','周五','周六','周日']
			},
			yAxis:{
				type: 'value'
			},
			series: [
				{
					name: '哈罗',
					type: 'line',
					data: [1000,800,1200,1300,1215,890,1500]
				},
				{
					name: '青桔',
					type: 'line',
					data: [1100,900,1000,1200,1200,990,1300]
				},
				{
					name: '美团',
					type: 'line',
					data: [1100,900,1100,1300,1295,990,1300]
				}
			]
		}
		return option;
	}
	
	getOption3 = () => {
		let option = {
			title: {
				text: "用户骑行订单",
			},
			tooltip:{
				trigger: 'axis',
			},
			xAxis:{
				
				data:['周一','周二','周三','周四','周五','周六','周日']
			},
			yAxis:{
				type: 'value'
			},
			series: [
				{
					name: '订单量',
					type: 'line',
					areaStyle: {
						normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(212,38,47)'
                            }, {
                                offset: 1,
                                color: 'rgb(42,125,135)'
                            }])
                        }
					},
					data: [1000,800,1200,1300,1215,890,1500]
				}
			]
		}
		return option;
	}
	
	render(){
		return (
			<div style={{width: '100%'}}>
				<Card title="折线图A" style={{width: '100%', marginBottom: 10}}>
					<ReactEcharts option={this.getOption()} theme="Imooc" style={{height: 400}} />
				</Card>
				<Card title="折线图B">
					<ReactEcharts option={this.getOption2()} theme="Imooc" style={{height: 400}} />
				</Card>
				<Card title="折线图C">
					<ReactEcharts option={this.getOption3()} theme="Imooc" style={{height: 400}} />
				</Card>
			</div>
		)
	}
}

export default Line;